<!-- 账号关联接口 页面 -->

<template>
  <div class="pgTitle">账号关联接口</div>
  <div class="pgCont">
    <div class="userListWrap">
      <div :class="{'list': true, 'selected': reactiveData.userListSelected===index}"
           v-for="(item, index) in reactiveData.userList" :key="index"
        @click="userClick(index)"
      >{{ item.username }}</div>
    </div>


    <div  class="transferWrap">
      <el-transfer
        v-model="transfer.rightValue"
        style="text-align: left; display: inline-block"
        :props="{ key: 'id', label: 'url', }"
        filterable
        :titles="['数据源', '关联项']"
        :button-texts="['左移', '右移']"
        :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
        :data="transfer.data"
        @change="transfer.handleChange"
      >
        <template #left-footer>
<!--          <el-button class="transfer-footer" size="small"></el-button>-->
          <div></div>
        </template>
        <template #right-footer>
          <div style="padding: 8px 5px 0; text-align:center;">
            <el-button class="transfer-footer" size="small" @click="SaveDependency">保存</el-button>
          </div>
        </template>
      </el-transfer>
    </div>

  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
// import axios from "@/utils/axios";
// 穿梭框 ↓↓↓
import IFData from "@/mockData/IFListData.json";
import {ElMessage} from "element-plus";


// table
const reactiveData = reactive({
  userList: <any>[
    {username:'', password:'' },
  ],
  userListSelected: <string|number>'',
})
// 读取缓存
const AccountList = localStorage.getItem('AccountList')
if( AccountList ) reactiveData.userList = JSON.parse(AccountList)




// transfer
const transfer = reactive({
  data: IFData || [],
  rightValue: <any>[],
  // leftValue: [],
  handleChange(
    value: number[] | string[],
    direction: 'left' | 'right',
    movedKeys: string[] | number[]
  ){
    console.log(value, direction, movedKeys)
  }
})


const lsAAI = localStorage.getItem('AAIStore')
let AAIStore = <any>{}
if(lsAAI) AAIStore = JSON.parse(lsAAI)

// 保存选中的穿梭框
const SaveDependency = ()=>{
  // console.log('reactiveData.userListSelected::>>', reactiveData.userList[ reactiveData.userListSelected ] )
  // console.log('transfer.rightValue:', transfer.rightValue)

  const nowUser = reactiveData.userList[ reactiveData.userListSelected ]
  AAIStore[nowUser.username] = Object.values(transfer.rightValue)
  localStorage.setItem('AAIStore',JSON.stringify(AAIStore))


  setTimeout(()=>{
    ElMessage.success("保存成功")
  },333)
  // console.log('AAIStore>>>', AAIStore)
}

// 左侧栏用户点击
const userClick = (index:any)=>{
  if( reactiveData.userListSelected === index ) return
  reactiveData.userListSelected = index

  const nowUser = reactiveData.userList[ reactiveData.userListSelected ]
  const nowUserVal = AAIStore[nowUser.username]

  // console.log('nowUserVal>>>>', nowUserVal)


  // 判断是否有已关联的项
  if(nowUserVal){
    transfer.data = JSON.parse(JSON.stringify(IFData))
    transfer.rightValue = nowUserVal

    // console.log('AAIStore[nowUser.username]', AAIStore[nowUser.username])
    // console.log('BaseData', AAIStore[nowUser.username])
    // console.log('nowUserVal', nowUserVal)
  }else{
    transfer.data = IFData
    transfer.rightValue = []
  }
}

// 激活左侧栏选中用户
userClick(0)

</script>

<style scoped lang="stylus" >
.pgCont{
  //display: flex;
}

.userListWrap{
  //padding-left: 10px
  .list{
    width: 200px
    display: inline-block;
    padding-left: 6px
    line-height:50px
    background-color: rgba(223, 237, 255, 0.2)
    border-top: 5px solid rgba(64, 158, 255, 0.2)
    text-align: center;
    cursor: pointer;

    +.list{
      margin-left:8px
    }

    &.selected{
      background-color: #dfedff
      border-top: 5px solid #409eff
    }
  }
}

.transferWrap{
  padding: 20px
  background-color: #dfedff

  :deep(.el-transfer){
    .el-transfer-panel{
      width:400px
    }
    .el-transfer-panel__body{
      height 600px
    }
    .el-checkbox__label{
      //overflow-wrap: normal;
      overflow visible
      text-overflow: auto;
      white-space: normal;
    }
  }
}
</style>
